<!DOCTYPE html>
<html style="min-height:100%;display: flex; flex-direction: column;justify-content: center;">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script>
      /*@cc_on alert("您正在使用的浏览器版本过低，为了您的最佳体验，请先升级浏览器。");window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/
      if(self !== top){
          window.top.location.href = window.location.href;
          document.execCommand("Stop") || window.stop();
      }
  </script>

  <title>{$meta.appname} - 注册页</title>
  <link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
  <link rel="stylesheet" href="__STATIC__/lib/swiper/css/swiper.css">

  <!-- 自定义css -->
  <link rel="stylesheet" href="__INDEX_STATIC__/css/common.css">
  <link rel="stylesheet" href="__INDEX_STATIC__/css/app.css">
  <link rel="stylesheet" href="__INDEX_STATIC__/css/sign.css">
</head>
<body>
 <div class="layui-container">
 	<div class="layui-row">
 		<div class="layui-col-md4 layui-col-md-offset4 layui-col-sm8 layui-col-sm-offset2 layui-col-xs12">
 			<div class="sign block">
              <!-- title -->
              <div class="sign-title">
                <h3>{$meta.appname}</h3>
                <p>欢迎加入, 立刻马上注册.</p>
              </div>

              <!-- form -->
              <form  class="layui-form sign-form">
                  <!-- username -->
                  <div class="form-block">
                    <input name="username" type="text" required  lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
                  </div>

                  <!-- email -->
                  <div class="flex-def form-block">
                    <input style="width:60%;" id="email_input" name="email" type="text" required  lay-verify="required|email" placeholder="邮箱" autocomplete="off" class="layui-input">
                    <button style="width:40%;" id='send_btn' type="button" class="layui-btn layui-btn-primary">发送验证码</button>
                  </div>

                  <!-- email captcha -->
                  <div class="form-block">
                    <input name="captcha" type="text" required  lay-verify="required" placeholder="邮箱验证码" autocomplete="off" class="layui-input">
                  </div>


                  <!-- password -->
                  <div class="form-block">
                    <input type="password" name="password" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                  </div>

                  <!-- re password -->
                  <div class="form-block">
                    <input type="password" name="re_password" placeholder="确认密码" required  lay-verify="required" autocomplete="off" class="layui-input">
                  </div>

                  <!-- submit -->
                  <div class="layui-form-item top-25">
                    <div class="layui-input-block text-right">
                      <button id="sub_btn" class="layui-btn" lay-submit lay-filter="formSign">提交注册</button>
                      <button type="reset"  class="layui-btn layui-btn-primary">重置</button>
                    </div>
                  </div>
              </form>
              <!-- other -->
              <div class="form-block other">
                <p>
                  <a href="{:url('login')}">已有帐号,返回登录.</a>
                </p>
              </div>

              <div class="form-block top-25">
                <p class="text-center" style="color: #666;">Copyright ©{php}echo date('Y', time());{/php}</p>
              </div>

 			</div>
 		</div>
 	</div>
 </div>



 
<script src="__STATIC__/lib/layui/layui.js"></script>
<script src="__INDEX_STATIC__/js/config.js"></script>
<script>
    'use strict';
    layui.use(['layer','jquery','form','email'], function(){
      let layer = layui.layer
          ,$ = layui.jquery
          ,email = layui.email
          ,form = layui.form;

          //监听提交
          form.on('submit(formSign)', function(data){
              let btn = $('#sub_btn');
              if (btn.hasClass('layui-btn-disabled')) return false;
              btn.addClass('layui-btn-disabled');

              $.ajax({
                  url : "{:url('signup')}",
                  type: 'POST',
                  data: data.field,
                  success : function(d){
                      layer.msg(d.msg,function(){
                          if (d.code === 0 && d.url){
                              window.location.href = d.url;
                              return;
                          }
                          btn.removeClass('layui-btn-disabled');
                      });
                  }
              });
              return false;
          });


          //发送邮件
          email.init({
              btn:'#send_btn',
              input:'#email_input',
              url:"{:url('sendCaptcha')}",
              disabled:'layui-btn-disabled'
          });

    });
</script> 
</body>
</html>